<template>
  <div class="qz">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item>
          <el-input placeholder="请输入内容" clearable v-model="searchData.val" size="small" class="input-with-select">
            <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
              <el-option label="全宗号" value="fondsNo"></el-option>
              <el-option label="全宗名" value="fondsName"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </search>
      <el-button class="reset" size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>
    <div class="fun-btn">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAddEdit('add')">新增</el-button>
      <el-button type="danger" plain size="small" icon="el-icon-delete" @click="handleDel('batch')">批量删除</el-button>
    </div>

    <avue-crud :option="option"
               :table-loading="loading"
               :data="tableData"
               :page.sync="page"
               ref="crud"
               @on-load="onLoad"
               @current-change="handleCurrentChange"
               @size-change="handleSizeChange"
               @selection-change="selectionChange"
               @row-save="handleRowSave"
               @row-update="handleRowUpdate"
    >
      <!--<template slot-scope="{row}" slot="icon">
        <i :class="row.icon" style="font-size: 20px"/>
      </template>
      <template slot="isKeep" slot-scope="{row}">
        <el-switch v-model="row.isKeep" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="isEnable" slot-scope="{row}">
        <el-switch v-model="row.isEnable" @change="handleRowUpdate(row)"></el-switch>
      </template>-->
    </avue-crud>

  </div>
</template>

<script>
import Search from '../../../../components/search/search'
import { getQzDic, addQzDic, editQzDic, delQzDic } from '../../../../api/quanzong/quanzong'

export default {
  name: 'Quanzong', // 全宗设置
  components: {
    Search
  },
  data () {
    return {
      dialogAddEdit: false,
      type: 'add',
      dialogTitle: '',
      editData: {},
      searchData: {
        val: '',
        select: 'fondsNo'
      },
      tableSelected: [],
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 240px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 200,
        column: [
          {
            label: '全宗号',
            prop: 'fondsNo',
            span: 24,
            rules: [
              { required: true, message: '请输入全宗号', trigger: 'blur' },
              { max: 20, message: '字符最大长度为20', trigger: 'change' }
            ]
          },
          {
            label: '全宗名',
            prop: 'fondsName',
            span: 24,
            rules: [
              { required: true, message: '请输入全宗名', trigger: 'blur' },
              { max: 128, message: '字符最大长度为128', trigger: 'change' }
            ]
          },
          {
            label: '排序号',
            prop: 'orderNo',
            type: 'input-number',
            span: 24,
            rules: [
              { required: true, message: '请输入全宗名', trigger: 'blur' }
            ]
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            span: 24,
            maxlength: 200,
            showWordLimit: true
          }
        ]
      }
    }
  },
  methods: {
    onLoad () {
      // 加载列表
      this.loading = true
      const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage
      }
      const params = []
      if (this.searchData.val) {
        params.push({
          op: 'like',
          name: this.searchData.select,
          value: this.searchData.val
        })
      }
      if (params.length > 0) {
        query.params = params
      } else {
        delete query.params
      }
      getQzDic(query).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.loading = false
      })
    },
    handleCurrentChange (currentPage) {
      // 翻页 第几页
      this.page.currentPage = currentPage
    },
    handleSizeChange (pageSize) {
      // 翻页 一页多少条
      this.page.pageSize = pageSize
    },
    handleReset () {
      // 重置
      Object.keys(this.searchData).forEach((key) => {
        this.searchData[key] = ''
      })
    },
    onSearch () {
      // 搜索
      this.page.currentPage = 1
      this.page.pageSize = 20
      this.onLoad()
    },
    handleAddEdit () {
      // 打开新增窗口
      this.$refs.crud.rowAdd()
    },
    handleRowSave (row, done, loading) {
      // 保存新增表格
      addQzDic(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    handleRowUpdate (row, index, done, loading) {
      // 编辑修改表格
      editQzDic(row).then(() => {
        this.onLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        done()
      }).catch(() => {
        loading()
      })
    },
    selectionChange (val) {
      // 选择表格
      this.tableSelected = val
    },
    handleDel () {
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少勾选一条需要删除的菜单信息！')
      } else {
        this.$confirm('此操作将永久删除选中的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map((item) => {
            ids.push(item.id)
          })
          delQzDic(ids).then(res => {
            this.loading = true
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.onLoad()
          })
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .avue-crud{
  padding-bottom: 15px;
  background: #fff;
}
</style>
